<template>
  <view
    class="cu-form-group"
    style="border-radius: 10px; position: absolute; right: 0rpx"
  >
    <uni-data-picker
      placeholder="请选择"
      popup-title="请选择楼栋/楼层/房间号"
      :localdata="dataTree"
      v-model="classes"
      @change="onchange"
      @nodeclick="onnodeclick"
      @popupopened="onpopupopened"
      @popupclosed="onpopupclosed"
    >
    </uni-data-picker>
  </view>
</template>

<script>
export default {
  props: {
    buildingId: String,
    floorId: String,
    roomCode: String,
  },
  data() {
    return {
      classes: "",
      selectIds: [],
      dataTree: [],
    };
  },
  mounted() {
    // this.getCascadeData();
  },
  methods: {
    transformData(data) {
      const transformedData = [];

      const groupedByBuilding = {};

      data?.forEach((item) => {
		  console.log('宿舍',item)
        const buildingId = item.buildingId;
        if (!groupedByBuilding[buildingId]) {
          groupedByBuilding[buildingId] = {
            text: item.buildingId_dictText,
            value: buildingId,
            children: [],
          };
        }

        const building = groupedByBuilding[buildingId];

        const floorId = item.floorId;
        let floorExisted = false;
        for (let i = 0; i < building.children.length; i++) {
          const floor = building.children[i];
          if (floor.value === floorId) {
            floorExisted = true;
            floor.children.push({
              text: `${item.roomCode}-(剩余床位${item.remainCapacity})`,
              value: item.roomCode,
            });
            break;
          }
        }

        if (!floorExisted) {
          building.children?.push({
            text: item.floorId_dictText,
            value: floorId,
            children: [
              {
                text: `${item.roomCode}-(剩余床位${item.remainCapacity})`,
                value: item.roomCode,
              },
            ],
          });
        }
      });

      for (const buildingId in groupedByBuilding) {
        if (groupedByBuilding.hasOwnProperty(buildingId)) {
          transformedData.push(groupedByBuilding[buildingId]);
        }
      }
	  console.log('transformedData',transformedData)
      return transformedData;
    },
    async getCascadeData(roomType) {
      try {
        const companyId = await uni.getStorageSync("Auth_Company_Id");
        const roomListByRoomType = await this.$http.get(
          "/crm_dormitory_room/crmDormitoryRoom/list",
          {
            params: {
              roomType,
              pageSize: -1,
			  pageNo:1,
              company: companyId,
              fullStatus: 1,
            },
          }
        );
        const data = roomListByRoomType?.data?.result?.records || [];
        this.dataTree = this.transformData(data);
      } catch (err) {
        console.error(err);
      }
    },
    onnodeclick(e) {
      console.log(e);
    },
    onpopupopened(e) {
      console.log("popupopened");
    },
    onpopupclosed(e) {
      console.log("popupclosed");
    },
    onchange(e) {
		console.log('onchange-e',e)
      this.$emit("input", e.detail.value);
    },
    setDataValue(roomCode) {
		console.log('setDataValue-roomCode',roomCode)
      this.classes = roomCode;
    },
  },
};
</script>

<style>
.title {
  font-size: 14px;
  font-weight: bold;
  margin: 20px 0 5px 0;
}

.data-pickerview {
  height: 400px;
  border: 1px #e5e5e5 solid;
}

.popper__arrow {
  top: -6px;
  left: 50%;
  margin-right: 3px;
  border-top-width: 0;
  border-bottom-color: #ebeef5;
}

.popper__arrow {
  top: -6px;
  left: 50%;
  margin-right: 3px;
  border-top-width: 0;
  border-bottom-color: #ebeef5;
}

/deep/ .input-value-border[data-v-3ed22fe0] {
  border: 0;
  border-radius: 5px;
}

/deep/ .placeholder[data-v-3ed22fe0] {
  color: #666666;
  font-size: 14px;
}

/deep/ .input-arrow[data-v-3ed22fe0] {
  width: 7px;
  height: 7px;
  margin-top: 3px;
  margin-right: 7px;
  border-left: 0;
  border-top: 0;
  border-right: 1.5px solid #8799a3;
  border-bottom: 1.5px solid #8799a3;
}
</style>
